<html>
  <body>
    <!-- Show/Hide events only need to occur on the root of what's shown/hidden,
     not for each descendant. -->
    <div role="main" id="root">
      <span role="group" id="child1">   <!-- becomes ignored -->
        <span role="link" id="grandchild1">1</span>
      </span>
      <span role="group" id="child2">   <!-- becomes ignored -->
        <span role="link" id="grandchild2">   <!-- becomes ignored -->
          2
        </span>
      </span>
    </div>
    <script>
      function go() {
        // Setting the role to "none" makes the node ignored, while the lang
        // attribute makes it "ignored but included in tree".
        document.querySelector('#child1').role = 'none';
        document.querySelector('#child2').role = 'none';
        document.querySelector('#grandchild2').role = 'none';
      }
    </script>
  </body>
</html>
